<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商家管理</title>
    <link rel="stylesheet" type="" href="http://at.alicdn.com/t/font_elc53nn4q4f2mx6r.css">
    <link rel="stylesheet" type="" href="../../sq/css/home.css">
    <style>
        .header { background: #F8F8F8; height: 4rem; position: absolute; z-index: 8; top: 0; left: 0; right: 0; bottom: auto; border-bottom: solid 0.05rem #EEE; }
        .header .center{
            overflow: hidden;
            width: 200px;
            border-radius: 5px;
            border:1px solid #ff6d82;
            height: 30px;
            margin-top: 10px;
            position: absolute;
            left:50%;
            margin-left: -100px;
        }
        .header .center p{
            float: left;
            text-align: center;
            width: 50%;
            margin: 0;
            font-size: 0.6rem;
            line-height: 30px;
            color:#ff6d82;
        }
        .header .center p a {
             color: #666;
        }
        .header{
            overflow: hidden;
            position: relative;
        }
        .center .active{
            background: #ff6d82;
            color: #ffffff !important;
        }
        .back-icon { width: 20px; height: 20px;background-image: url(../../images/arrow_left_b.png); position: absolute; left: 10px; top: 10px; background-position: 50% 50%;background-repeat: no-repeat;
            background-size: 100%; opacity: 0.75}
        .nav-item { width: 100%; height: 40px; }
        .nav-item a { display: inline-block; width: 50%; color: #666; font-size: 15px; text-align: center; line-height: 40px; background: #f6ebe9;}
        .nav-item a.active { background: #ff6666; color: #fff;}
        .goods-img { display: inline-block; vertical-align: top; width: 60px; height: 60px;}
        .goods-img img { width: 100%; height: 100%;}
        .goods-infos { display: inline-block; padding-left: 10px;}
        .price { padding-left: 5px; color: #666; height: 30px; line-height: 30px;}
        .byer_name { float: right;}
    </style>
</head>
<body>
<div class="header">
    <a href="./index.html" class="back-icon"><i class="back"></i></a>
    <div class="center"><p><a href="offline_list_order.html">线下订单</a></p><p  class="active">商圈订单</p></div>
</div>
<div class="nav-item">
    <a href="javascript:;" class="active" onclick="tab(0)">待消费</a><a href="javascript:;" onclick="tab(1)">已消费</a>
</div>
<div class="main">
</div>
</body>
</html>
<script type="text/html" id="list">
    <% for(var i = 0;i<list.length;i++){ %>
    <div class="detail">
        <div class="detail_head">
            <div style="width:90%;margin: 0 auto;padding: 15px">
                <img src="../../sq/img/order.png" alt="">
                <div class="order">
                    <div>订单</div>
                    <p><%=list[i].time%></p>
                </div>
                <div class="confirm">
                    <% if(list[i].recive==0) { %>
                    等待确认
                    <% } %>
                    <% if(list[i].recive==1) { %>
                    <span style="color: #666">已确认</span>
                    <% } %>
                </div>
            </div>
        </div>
        <div style=" padding: 0 10px;">
            <div class="goods-img">
                <img src="<%=list[i].goods_img%>" alt="">
            </div>
            <div class="goods-infos">
                 <p><%=list[i].goods_name%></p>
                 <p class="price">￥ <%=list[i].goods_price%></p>
                 <p><% if(list[i].order_state==10) { %> 代付款 <% }else if(list[i].order_state==0) { %> 已取消<% }else{ %> 已付款 <% }%></p>
            </div>
            <div class="byer_name">
                <%=list[i].buyer_name%>
            </div>
        </div>
        <div class="detail_foot" style="margin-top: 10px;position: relative">
            <div>
                订单编号:<%=list[i].order_sn%>
            </div>
            <% if(list[i].recive==0) { %>
            <div class="querenshouhuo">
                确认收款
            </div>
            <% } %>
        </div>
    </div>
    <% } %>
</script>
<script type="text/javascript" src="../../js/config.js"></script>
<script type="text/javascript" src="../../js/zepto.min.js"></script>
<script type="text/javascript" src="../../js/template.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../js/tmpl/bs_order_list.js"></script>
<script>
    function calcRem() {
        var http = document.getElementsByTagName("html")[0];
        var w = document.documentElement.clientWidth;
        http.style.fontSize = w / 32 + "px";
    }
    calcRem();
    window.onresize = function() {
        calcRem();
    };
</script>